<!DOCTYPE html>
<html>

<head>
  <title>功能管理</title>
  <meta charset="utf-8">
  <!-- 指定以IE8的方式来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
  <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="/css/jsherp.css" />
  <link rel="stylesheet" type="text/css" href="/js/easyui/themes/default/easyui.css" />
  <link rel="stylesheet" type="text/css" href="/js/easyui/themes/icon.css" />
  <link type="text/css" rel="stylesheet" href="/css/common.css" />
  <script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="/js/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="/js/common/common.js"></script>
  <script src="/js/common/jsherp.js"></script>
</head>

<body>
  <!-- 数据显示table -->
  <div id="tablePanel" class="easyui-panel" data-options="fit:true" style="padding:1px;top:300px;" title="功能列表"
    iconCls="icon-list">
    <div class="box-body form-inline">
      <div class="form-group">
        <label class="control-label">名称：</label>
        <div class="control-inline">
          <input type="text" id="searchName" name="searchName" value="" maxlength="100"
            class="easyui-textbox width-90" />
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">类型：</label>
        <div class="control-inline">
          <select name="searchType" id="searchType" class="easyui-combobox" data-options="panelHeight:'auto'"
            style="width:100px;">
            <option value="">全部</option>
            <option value="电脑版">电脑版</option>
            <option value="手机版">手机版</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">备注：</label>
        <div class="control-inline">
          <input type="text" id="searchRemark" name="searchRemark" value="" maxlength="100"
            class="easyui-textbox width-90" />
        </div>
      </div>
      <div class="form-group">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="searchBtn">查询</a>&nbsp;
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-redo" id="searchResetBtn">重置</a>
      </div>
    </div>
    <table id="tableData" style="top:300px;border-bottom-color:#FFFFFF"></table>
  </div>

  <div id="functionsDlg" class="easyui-dialog" style="width:380px;padding:10px 20px" closed="true"
    buttons="#dlg-buttons" modal="true" cache="false" collapsible="false" closable="true">
    <form id="functionsFM" method="post" novalidate>
      <table>
        <tr>
          <td style="width:65px;">编号</td>
          <td style="padding:5px">
            <input name="Number" id="Number" class="easyui-textbox" style="width: 230px;" />
          </td>
        </tr>
        <tr>
          <td>名称</td>
          <td style="padding:5px">
            <input name="Name" id="Name" class="easyui-textbox" data-options="required:true,validType:'length[2,100]'"
              style="width: 230px;" />
          </td>
        </tr>
        <tr>
          <td>上级编号</td>
          <td style="padding:5px">
            <input name="PNumber" id="PNumber" class="easyui-textbox" style="width: 230px;" />
          </td>
        </tr>
        <tr>
          <td>链接</td>
          <td style="padding:5px"><input name="URL" id="URL" class="easyui-textbox" style="width: 230px;" /></td>
        </tr>
        <tr>
          <td>排序</td>
          <td style="padding:5px"><input name="Sort" id="Sort" class="easyui-textbox" style="width: 230px;" /></td>
        </tr>
        <tr>
          <td>功能按钮</td>
          <td style="padding:5px">
            <input id="PushBtn" name="PushBtn" style="width:230px;" />
          </td>
        </tr>
        <tr>
          <td>图标</td>
          <td style="padding:5px">
            <input id="icon" name="icon" class="easyui-textbox" data-options="buttonText:'参考'" style="width:230px;" />
          </td>
        </tr>
        <tr>
          <td>启用</td>
          <td style="padding:5px"><input name="Enabled" id="Enabled" type="checkbox"
              style="width: 230px;height: 20px" /></td>
        </tr>
      </table>
    </form>
  </div>
  <div id="dlg-buttons">
    <a href="javascript:void(0)" id="saveFunctions" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:void(0)" id="cancelFunctions" class="easyui-linkbutton" iconCls="icon-cancel"
      onclick="javascript:$('#functionsDlg').dialog('close')">取消</a>
  </div>

  <script type="text/javascript">
    //初始化界面
    $(function () {
      initTableData();
      ininPager();
      initForm();
      bindEvent();
    });

    //防止表单提交重复
    function initForm() {
      $('#functionsFM').form({
        onSubmit: function () {
          return false;
        }
      });
    }

    //初始化表格数据
    function initTableData() {
      $('#tableData').datagrid({
        //title:'功能列表',
        //iconCls:'icon-save',
        //width:700,
        height: heightInfo,
        rownumbers: false,
        //动画效果
        animate: false,
        //选中单行
        singleSelect: true,
        collapsible: false,
        selectOnCheck: false,
        //fitColumns:true,
        //单击行是否选中
        checkOnSelect: false,
        pagination: true,
        //交替出现背景
        striped: true,
        //loadFilter: pagerFilter,
        pageSize: initPageSize,
        pageList: initPageNum,
        columns: [[
          { field: 'id', width: 35, align: "center", checkbox: true },
          { title: '编号 ', field: 'number', width: 80 },
          { title: '名称', field: 'name', width: 100 },
          { title: '上级编号', field: 'pnumber', width: 80 },
          { title: '链接', field: 'url', width: 250 },
          { title: '排序', field: 'sort', width: 60 },
          {
            title: '启用', field: 'enabled', width: 50, formatter: function (value) {
              return value ? "开" : "关";
            }
          },
          { title: '图标', field: 'icon', width: 110 },
          {
            title: '操作', field: 'op', align: "center", width: 130, formatter: function (value, rec, index) {
              var str = '';
              str += '<img src="/js/easyui/themes/icons/pencil.png" style="cursor: pointer;" onclick="editFunctions(\'' + index + '\');"/>&nbsp;<a onclick="editFunctions(\'' + index + '\');" style="text-decoration:none;color:black;" href="javascript:void(0)">编辑</a>&nbsp;&nbsp;';
              str += '<img src="/js/easyui/themes/icons/edit_remove.png" style="cursor: pointer;" onclick="deleteFunctions(' + rec.id + ');"/>&nbsp;<a onclick="deleteFunctions(' + rec.id + ');" style="text-decoration:none;color:black;" href="javascript:void(0)">删除</a>&nbsp;&nbsp;';
              return str;
            }
          }
        ]],
        toolbar: [
          {
            id: 'addFunctions',
            text: '增加',
            iconCls: 'icon-add',
            handler: function () {
              addFunctions();
            }
          }, '-',
          {
            id: 'deleteFunctions',
            text: '删除',
            iconCls: 'icon-remove',
            handler: function () {
              batDeleteFunctions();
            }
          }
        ],
        onLoadError: function () {
          $.messager.alert('页面加载提示', '页面加载异常，请稍后再试！', 'error');
          return;
        }
      });
      dgResize();
      showFunctionsDetails(1, initPageSize);
    }

    //初始化键盘enter事件
    $(document).keydown(function (event) {
      //兼容 IE和firefox 事件
      var e = window.event || event;
      var k = e.keyCode || e.which || e.charCode;
      //兼容 IE,firefox 兼容
      var obj = e.srcElement ? e.srcElement : e.target;
      //绑定键盘事件为 id是指定的输入框才可以触发键盘事件 13键盘事件 ---遗留问题 enter键效验 对话框会关闭问题
      if (k == "13" && (obj.id == "Name" || obj.id == "PNumber" || obj.id == "URL")) {
        $("#saveFunctions").click();
      }
      //搜索按钮添加快捷键
      if (k == "13" && (obj.id == "searchName" || obj.id == "searchType")) {
        $("#searchBtn").click();
      }
    });

    //分页信息处理
    function ininPager() {
      try {
        var opts = $("#tableData").datagrid('options');
        var pager = $("#tableData").datagrid('getPager');
        pager.pagination({
          onSelectPage: function (pageNum, pageSize) {
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',
              {
                pageNumber: pageNum,
                pageSize: pageSize
              });
            showFunctionsDetails(pageNum, pageSize);
          }
        });
      }
      catch (e) {
        $.messager.alert('异常处理提示', "分页信息异常 :  " + e.name + ": " + e.message, 'error');
      }
    }

    //绑定事件
    function bindEvent() {
      var url = '/js/pages/manage/pushBtn.json';
      $('#PushBtn').combobox({
        url: url,
        valueField: 'id',
        textField: 'text',
        panelHeight: 120,
        multiple: true,
        method: 'get'
      });
    }

    //删除功能信息
    function deleteFunctions(functionsID) {
      $.messager.confirm('删除确认', '确定要删除此功能信息吗？', function (r) {
        if (r) {
          $.ajax({
            type: "post",
            url: "/functions/batchDeleteFunctionsByIds",
            dataType: "json",
            data: ({
              ids: functionsID
            }),
            success: function (res) {
              if (res && res.code == 200) {
                $("#searchBtn").click();
              } else {
                $.messager.alert('删除提示', '删除功能信息失败，请稍后再试！', 'error');
              }
            },
            //此处添加错误处理
            error: function () {
              $.messager.alert('删除提示', '删除功能信息异常，请稍后再试！', 'error');
              return;
            }
          });
        }
      });
    }

    //批量删除
    function batDeleteFunctions() {
      var row = $('#tableData').datagrid('getChecked');
      if (row.length == 0) {
        $.messager.alert('删除提示', '没有记录被选中！', 'info');
        return;
      }
      if (row.length > 0) {
        $.messager.confirm('删除确认', '确定要删除选中的' + row.length + '条功能信息吗？', function (r) {
          if (r) {
            var ids = "";
            for (var i = 0; i < row.length; i++) {
              if (i == row.length - 1) {
                ids += row[i].id;
                break;
              }
              ids += row[i].id + ",";
            }
            $.ajax({
              type: "post",
              url: "/functions/batchDeleteFunctionsByIds",
              dataType: "json",
              async: false,
              data: ({
                ids: ids
              }),
              success: function (res) {
                if (res && res.code === 200) {
                  $("#searchBtn").click();
                  $(":checkbox").attr("checked", false);
                } else {
                  $.messager.alert('删除提示', '删除功能信息失败，请稍后再试！', 'error');
                }
              },
              //此处添加错误处理
              error: function () {
                $.messager.alert('删除提示', '删除功能信息异常，请稍后再试！', 'error');
                return;
              }
            });
          }
        });
      }
    }

    //增加
    var url;
    var functionsID = 0;
    //保存编辑前的名称
    var oldFunctions = "";

    function addFunctions() {
      $('#functionsDlg').dialog('open').dialog('setTitle', '<img src="/js/easyui/themes/icons/edit_add.png"/>&nbsp;增加功能信息');
      $(".window-mask").css({ width: webW, height: webH });
      $("#Name").val("").focus();
      $('#functionsFM').form('clear');
      //点击icon图标弹出页面
      iconBtnFun();
      oldFunctions = "";
      functionsID = 0;
      url = '/functions/add';
    }

    //保存信息
    $("#saveFunctions").off("click").on("click", function () {
      if (checkFunctionsName()) {
        return;
      }
      var infoObj = $("#functionsFM").serializeObject();
      infoObj.State = $("#State").is(':checked');
      infoObj.Enabled = $("#Enabled").is(':checked');
      var PushBtn = JSON.stringify($("#PushBtn").combobox('getValues'));
      infoObj.PushBtn = PushBtn.replace(/\"/g, "").replace(/\[|]/g, "");
      $.ajax({
        url: url,
        type: "post",
        dataType: "json",
        data: ({
          info: JSON.stringify(infoObj)
        }),
        success: function (res) {
          if (res && res.code === 200) {
            $('#functionsDlg').dialog('close');
            //加载完以后重新初始化
            var opts = $("#tableData").datagrid('options');
            showFunctionsDetails(opts.pageNumber, opts.pageSize);
          }
        },
        //此处添加错误处理
        error: function () {
          $.messager.alert('提示', '保存功能信息异常，请稍后再试！', 'error');
          return;
        }
      });
    });

    //编辑信息
    function editFunctions(index) {
      var rowsdata = $("#tableData").datagrid("getRows")[index];
      $("#Number").textbox("setValue", rowsdata.number);
      $("#Name").focus().textbox("setValue", rowsdata.name);
      $("#PNumber").textbox("setValue", rowsdata.pnumber);
      $("#URL").textbox("setValue", rowsdata.url);
      $("#State").attr("checked", rowsdata.state);
      $("#Sort").textbox("setValue", rowsdata.sort);
      $("#Enabled").attr("checked", rowsdata.enabled);
      $("#icon").textbox("setValue", rowsdata.icon);
      $("#Type").textbox("setValue", rowsdata.type);
      //点击icon图标弹出页面
      iconBtnFun();
      if (rowsdata.pushbtn) {
        var arr = rowsdata.pushbtn.split(",");
        var pushBtnArray = [];
        for (var i = 0; i < arr.length; i++) {
          if (arr[i]) {
            pushBtnArray.push(arr[i]);
          }
        }
        if (pushBtnArray.length) {
          $("#PushBtn").combobox('setValues', pushBtnArray);
        }
      }
      else {
        $("#PushBtn").combobox('setValues', '');
      }

      oldFunctions = rowsdata.name;
      $('#functionsDlg').dialog('open').dialog('setTitle', '<img src="/js/easyui/themes/icons/pencil.png"/>&nbsp;编辑功能信息');
      $(".window-mask").css({ width: webW, height: webH });
      functionsID = rowsdata.id;
      //焦点在名称输入框==定焦在输入文字后面
      $("#Name").val("").focus().val(rowsdata.name);
      url = '/functions/update?id=' + rowsdata.id;
    }

    //点击icon图标弹出页面
    function iconBtnFun() {
      $("#icon").textbox({
        onClickButton: function () {
          js.addTabPage(null, "图标选择", "/pages/manage/icon_select.html");
        }
      });
    }

    //检查名称是否存在 ++ 重名无法提示问题需要跟进
    function checkFunctionsName() {
      var Name = $.trim($("#Name").val());
      //表示是否存在 true == 存在 false = 不存在
      var flag = false;
      //开始ajax名称检验，不能重名
      if (name.length > 0 && (oldFunctions.length == 0 || name != oldFunctions)) {
        $.ajax({
          type: "get",
          url: "/functions/checkIsNameExist",
          dataType: "json",
          async: false,
          data: ({
            id: functionsID,
            name: Name
          }),
          success: function (res) {
            if (res && res.code === 200) {
              if (res.data && res.data.status) {
                flag = res.data.status;
                if (flag) {
                  $.messager.alert('提示', '功能名称已经存在', 'info');
                  return;
                }
              }
            }
          },
          //此处添加错误处理
          error: function () {
            $.messager.alert('提示', '检查功能名称是否存在异常，请稍后再试！', 'error');
            return;
          }
        });
      }
      return flag;
    }

    //搜索处理
    $("#searchBtn").unbind().bind({
      click: function () {
        showFunctionsDetails(1, initPageSize);
        var opts = $("#tableData").datagrid('options');
        var pager = $("#tableData").datagrid('getPager');
        opts.pageNumber = 1;
        opts.pageSize = initPageSize;
        pager.pagination('refresh', {
          pageNumber: 1,
          pageSize: initPageSize
        });
      }
    });

    function showFunctionsDetails(pageNo, pageSize) {
      var name = $.trim($("#searchName").val());
      var type = $.trim($("#searchType").val());
      $.ajax({
        type: "get",
        url: "/functions/list",
        dataType: "json",
        data: ({
          search: JSON.stringify({
            name: name,
            type: type
          }),
          currentPage: pageNo,
          pageSize: pageSize
        }),
        success: function (res) {
          if (res && res.code === 200) {
            if (res.data && res.data.page) {
              $("#tableData").datagrid('loadData', res.data.page);
            }
          }
        },
        //此处添加错误处理
        error: function () {
          $.messager.alert('查询提示', '查询数据后台异常，请稍后再试！', 'error');
          return;
        }
      });
    }

    //重置按钮
    $("#searchResetBtn").unbind().bind({
      click: function () {
        $("#searchName").textbox("clear");
        $("#searchType").combobox("clear");
        //加载完以后重新初始化
        $("#searchBtn").click();
      }
    });
  </script>
</body>

</html>